<!DOCTYPE html>
<html>
<head>
<title>event</title>
<meta charset="utf-8">
<style type="text/css">
  
  div {
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .d1 {

    width: 400px;
    height: 400px;
    margin: 30px auto;
  }

  .d2 {
    width: 300px;
    height: 300px;
  }

  .d3 {
    width: 200px;
    height: 200px;
  }

</style>
</head>
<body>

<div class="d1">
  
  <div class="d2">
    
    <div class="d3">
      
    </div>
  </div>
</div>

</body>
<script type="text/javascript">

var ed1 = document.getElementsByClassName("d1")[0];  
var ed2 = document.getElementsByClassName("d2")[0];
var ed3 = document.getElementsByClassName("d3")[0];

window.addEventListener("click", function(e) {
  console.log("window");
}, true);

document.addEventListener("click", function(e) {
  console.log("document");
})

ed1.addEventListener("click", function(e) {
  console.log("d1");
})

ed2.addEventListener("click", function(e) {
  console.log("d2");
})

ed3.addEventListener("click", function(e) {
  e.stopPropagation();
  console.log("d3");
})

/*
  output:

  window
  d3

*/

/*

  事件冒泡和事件捕获处理事件

  默认是冒泡事件处理

  addEventListener(<event-type>, <event-handler>, type)

  type: false, 冒泡事件处理，默认

        true，捕获事件处理

  preventDefault  去掉事件的默认处理

  stopPropagation  阻止事件继续冒泡

*/

</script>
</html>